<template>
	<view class="page">
		<view class="box_1">
			<view class="box_4">
				<view class="image-text_1">
					<view class="section_1"></view>
					<text lines="1" class="text-group_1">运动记录</text>
				</view>
			</view>
			<view class=" flex-align  flex-wrap">
				<view style="width: 345rpx;height: 160rpx;margin-left: 20rpx; margin-bottom: 20rpx;" :style="{ background: `url(${acimg3}) left top/100% 100% no-repeat` }"
					v-for="(item,index) in my_lists" :key="index">
					<view style="display: flex;flex-direction: row; justify-content: space-between; ">
						<view style="display: flex;flex-direction: row;margin: 30rpx 0 0 30rpx;">
							<view>
								<image style="height: 42rpx;width: 42rpx;border-radius: 15rpx;" :src="item.icon" mode=""></image>
							</view>
							<view style="margin-left: 10rpx;font-size: 28rpx;">
								{{item.name}}
							</view>
						</view>
						<!-- <view style="margin: 30rpx 20rpx 0 0;">
							<u-icon name="arrow-right" size="12" :customStyle="{ color: 'rgb(190,190,190) !important' }"
								:bold="true">
							</u-icon>
						</view> -->
					</view>
					<view style="margin: 6rpx 0 0 30rpx;">
						<text style="font-size: 48rpx;font-weight: bold;">{{item.data.time}}</text>
						<text style="font-size: 24rpx;margin-left: 5rpx;">分钟</text>
					</view>
				</view>
			</view>
			<view class="box_4">
				<view class="image-text_1">
					<view class="section_1"></view>
					<text lines="1" class="text-group_1">所有运动</text>
				</view>
			</view>
			<view class="cap_daren">
				<view class="cap_xunhuan" v-for="(item,index) in mylists" :key="index">
					<view class="cap_xunhuan1">
						<image style="width: 60rpx;height: 60rpx;" :src="item.icon" mode=""></image>
					</view>
					<view class="cap_xunhuan2">
						{{item.name}}
					</view>
					<view class="cap_xunhuan3" v-if="item.is_on == 0"
						@click="ondl(item,index)">
						点亮
					</view>
					<view class="cap_xunhuan33" v-if="item.is_on == 1" @click="ondel(item,index)">
						取消
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const index = require('@/api/personal/index.js')
	const subscribe = require('@/api/subscribe/index.js')

	export default {
		data() {
			return {
				icon4: this.$https.assetsPath + '28a23e828379c206ac26139816f194bb327c8f89.png',
				icon5: this.$https.assetsPath + '8721b07c9f06b88defcfc8a7f6da6a7dddea231c.png',
				icon6: this.$https.assetsPath + 'de4dc9ca6f9d68fd14adb835d65b4513a2281b17.png',
				icon7: this.$https.assetsPath + '46fdf821c019312e34ec91b87751e3eb9b58f9e0.png',
				acimg3: this.$https.assetsPath + 'po44.png',
				mylists: [],
				my_lists: [],
				selectedCount: 0, // 已选中项目数量
				maxSelected: 4 // 最大可选中数量
			};
		},
		onLoad(options) {
			this.getTarget()
		},
		onShow() {

		},
		methods: {
			ondl(item, index) {
				if (this.selectedCount < this.maxSelected) {
					let params = {
						open_id: uni.getStorageSync('openid'),
						project_id: getApp().globalData.projectId,
						app_id: this.$https.weixinAppId,
						venue_project_id: item.id,
						op_type: 1,
					};
					subscribe.get_Target(params).then(res => {
						if (res.code == 1) {
							this.getTarget()
						}else{
							uni.showToast({
								icon: 'none',
								mask: true,
								title: '请登录！'
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1300)
						}
					})
					// 增加已选中项目数量
					this.selectedCount++;
				} else {
					uni.showToast({
						icon: 'none',
						mask: true,
						title: '已达最大点亮数量'
					})
				}

				
			},
			async getTarget() {
				let params = {
					open_id: uni.getStorageSync('openid'),
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
				};
				let res = await index.mylist(params);
				if (res.code === 1) {
					this.mylists = res.data.result.all
					this.my_lists = res.data.result.my
					this.selectedCount =  res.data.result.my.length
				}
			},
			ondel(item, index) {
				let params = {
					open_id: uni.getStorageSync('openid'),
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
					venue_project_id: item.id,
					op_type: 2,
				};
				subscribe.get_Target(params).then(res => {
					if (res.code == 1) {
						this.getTarget()
					}
				})
			},
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		background-color: #fff;
		position: relative;
		width: 750rpx;
		height: 100%;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.box_1 {
		// box-shadow: 0px 0px 10px 0px rgba(32, 64, 48, 0.12);
		background-color: rgba(255, 255, 255, 1.0);
		display: flex;
		flex-direction: column;
		// padding: 29rpx 12rpx 18rpx 20rpx;
	}

	.box_4 {
		background-color: rgba(255, 255, 255, 1.0);
		border-radius: 12rpx;
		display: flex;
		flex-direction: row;
		padding: 29rpx 12rpx 18rpx 20rpx;
	}

	.image-text_1 {
		width: 128rpx;
		flex-direction: row;
		display: flex;
		justify-content: space-between;
	}

	.section_1 {
		background-color: rgba(75, 166, 119, 1.0);
		border-radius: 12rpx;
		width: 6rpx;
		height: 24rpx;
		display: flex;
		flex-direction: column;
		margin: 8rpx 0 8rpx 0;
	}

	.text-group_1 {
		overflow-wrap: break-word;
		color: #333333;
		font-size: 28rpx;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		text-align: left;
		white-space: nowrap;
		line-height: 40rpx;
	}

	.cap_daren {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.cap_xunhuan {
		display: flex;
		flex-direction: column;
		/* justify-content: center; */
		align-items: center;
		background-color: #F4F9F9;
		width: 162rpx;
		height: 220rpx;
		border-radius: 20rpx;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}

	.cap_xunhuan1 {
		margin-top: 20rpx;
	}

	.cap_xunhuan2 {
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
		margin-top: 10rpx;
	}

	.cap_xunhuan3 {
		width: 130rpx;
		height: 48rpx;
		background: linear-gradient(270deg, #47B37B 0%, #69D19B 100%), #4BA677;
		border-radius: 25rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 48rpx;
		margin-top: 20rpx;
	}

	.cap_xunhuan33 {
		width: 130rpx;
		height: 48rpx;
		border: 1px solid #4BA677;
		border-radius: 25rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #4BA677;
		text-align: center;
		line-height: 48rpx;
		margin-top: 20rpx;
		background: #fff;
	}
</style>